<template>
  <div class="success-list-wrap" :class="{ 'lang-en': $i18n.locale === 'en' }">
    <div class="success-list">
      <div class="none-box" v-if="successList.length == 0" style="color: #fff">
        {{ $t('暂无数据') }}
      </div>
      <div class="success-item" v-for="(item, index) in successList" :key="index">
        <div class="head-img">
          <img @click="goDetail(item)" :src="item.coverUrl" alt="" />
        </div>
        <div class="success-info">
          <p class="success-title">
            <span @click="goDetail(item)">{{ item.title }}</span>
            <span>{{
              formatDate(item.createTime, 'YYYY-MM-DD HH-mm-ss')
            }}</span>
          </p>
          <p class="success-mark" @click="goDetail(item)" v-html="item.context"></p>
          <div class="button-box">
            <button class="my-button" @click="goDetail(item)">
              {{ $t('查看详情 ')
              }}<i style="margin-left: 1.6rem" class="el-icon-right"></i>
            </button>
            <div class="sharethis-inline-share-buttons my-share-box"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="pagination-box">
      <el-pagination background :current-page="page.pageNo" :page-sizes="[10, 20, 50, 100]" :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import api from '@/api/success.js'
import { formatDate } from '@/utils/index.js'
export default {
  data() {
    return {
      successList: [],
      page: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
    }
  },
  mounted() {
    this.initData()
    setTimeout(() => {
      if (window.__sharethis__) {
        window.__sharethis__.initialize()
        window.__sharethis__.ibl()
        window.__sharethis__.ecommerce()
        window.__sharethis__.floc()
      }
    }, 100)
  },
  methods: {
    formatDate(time, format) {
      return formatDate(time, format)
    },
    goDetail(item) {
      // const lang = localStorage.getItem("i18nLocale");
      this.$router.push(`/successDetail?caseId=${item.caseId}`)
    },
    async initData() {
      let res = await this.$http.get(api.getList, {
        params: {
          pageNo: this.page.pageNo,
          pageSize: this.page.pageSize,
          orderBy: 'seq',
          status: 0,
        },
      })
      if (res && res.code == 0) {
        this.successList = res.data.list
        this.page.total = res.data.total
      } else {
        this.$message.error(res.msg || this.$t('网络错误'))
      }
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.page.pageNo = 1
      this.initData()
    },
    handleCurrentChange(val) {
      this.page.pageNo = val
      this.initData()
    },
  },
}
</script>
<style lang="scss" scoped>
.success-list-wrap {
  width: 64.39rem;
  border-radius: 0.44rem;
  margin: 3.72rem auto 0 7.78rem;

  .success-item {
    display: flex;
    margin-bottom: 3.56rem;

    .head-img {
      width: 20.71rem;
      height: 13.11rem;
      border-radius: 0.22rem 0.22rem 0.22rem 0.22rem;
      overflow: hidden;
      margin-right: 1.5rem;
      flex-shrink: 0;

      img {
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
    }

    .success-info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 42.22rem;
    }

    .success-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.89rem;

      span:nth-child(1) {
        font-weight: bold;
        font-size: 1.44rem;
        color: #ecf6ff;
        cursor: pointer;
      }

      span:nth-child(2) {
        font-size: 0.89rem;
        color: #c4e3ff;
      }
    }

    .success-mark {
      font-size: 0.89rem;
      color: #ecf6ff;
      line-height: 1.56rem;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
      height: 6.24rem;
      cursor: pointer;
    }

    .button-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .my-button {
      width: 10rem;
      height: 2.67rem;
      line-height: 2.67rem;
      font-weight: 400;
      font-size: 1rem;
      color: #ffffff;
    }
  }

  .pagination-box {
    margin-bottom: 5rem;
    text-align: center;
  }
}
</style>
<style lang="scss">
.success-list-wrap {
  .el-pagination.is-background .el-pager li {
    border-radius: 0.2rem;
    border: 0.06rem solid #d9dbe2;
    background: #c4e3ff;
  }

  .el-pagination.is-background .el-pager li:not(.disabled).active {
    border: 0.06rem solid #146eb4;
    color: #ffffff;
    background: linear-gradient(90deg, #2f7fb9 0%, #045fb2 100%);
  }
}

.lang-en {
  &.success-list-wrap .success-item .my-button {
    width: 14rem;
  }
}
</style>
